<template>
  <FigureCard :style="[{ width: state.width, height: state.height }, state.style]">
    <div class="v-figure-content">
      <div class="flex-row figure-label" :style="{ 'border-color': state.fontColor }">
        {{ state.label }}
      </div>
      <div
        class="flex-row figure-value"
        :style="{
          'font-size': state.fontSize + 'px',
          color: state.fontColor,
          'padding-bottom': '4px',
          height: slotFooter ? 'calc(100% - 44px)' : 'calc(100% - 24px)',
        }"
      >
        <div class="figure-value-bar">
          <span class="figure-value-number" :style="{ color: state.fontColor, 'font-size': state.fontSize + 'px' }">{{
            state.value
          }}</span>
          <span v-show="state.unit" class="figure-value-unit">{{ state.unit }}</span>
        </div>
      </div>
      <div class="flex-row v-figure-footer" v-if="slotFooter">
        <slot name="footer"></slot>
      </div>
    </div>
  </FigureCard>
</template>
<script setup>
  import { useSlots, reactive, onMounted, watch, nextTick } from 'vue'
  import FigureCard from './FigureCard.vue'
  import useTheme from '@v-model/shared--hooks/src/use-theme'
  const { theme } = useTheme()
  //判断<slot name="footer"/>是否有传值
  const slotFooter = !!useSlots().footer

  const props = defineProps({
    width: {
      type: [String],
      default: () => '100%',
    },
    height: {
      type: [String],
      default: () => '100%',
    },
    style: {
      type: [Object, String],
      default: () => {},
    },
    fontSize: {
      //图标大小、数字大小
      type: [String, Number],
      default: () => 24,
    },
    fontColor: {
      type: [String],
      default: () => '#000',
    },
    label: {
      type: [String],
      default: () => '',
    },
    value: {
      type: [String, Number],
      default: () => '0000',
    },
    unit: {
      type: [String],
      default: () => '',
    },
    icon: {
      type: [String],
      default: () => 'el#Histogram',
    },
  })

  const state = reactive({
    label: props.label,
    value: props.value,
    unit: props.unit,
    icon: props.icon,
    width: props.width,
    height: props.height,
    style: props.style,
    fontSize: props.fontSize,
    fontColor: props.fontColor,
  })

  watch(
    () => props,
    (newVal, oldVal) => {
      init()
    },
    { deep: true }
  )
  const initModel = function () {
    state.label = props.label
    state.value = props.value
    state.unit = props.unit
    state.icon = props.icon
    state.width = props.width
    state.height = props.height
    state.style = props.style
    state.fontSize = props.fontSize
    state.fontColor = props.fontColor
  }
  const init = function () {
    initModel()
  }

  onMounted(() => {
    init()
  })
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-figure-content {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }

  .figure-label {
    font-size: var(--v-base-font-size);
    width: 100%;
    height: 24px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 3px solid;
    border-bottom-color: v-bind('theme.color');
    font-weight: bold;
  }

  .figure-value {
    width: 100%;
    height: calc(100% - 24px);
    justify-content: center;
    align-items: center;
  }
  .figure-value-bar {
    width: 100%;
    text-align: center;
    position: relative;
  }
  .figure-value-number {
    font-family: electronicFont;
    font-weight: 700;
  }
  .figure-value-unit {
    font-size: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .v-figure-footer {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    height: 20px;
    width: 100%;
    border-top: 0.5px solid #dcdfe6;
    justify-content: flex-start;
    align-items: center;
  }
</style>
